<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getCompanyNameAPI } from '@/http/swiperCompanyInfo'
import useUserStore from '@/store/modules/user'
import compareEchart from './component/compareEchart.vue'
import productClassEchart from './component/productClassEchart.vue'
import loginDataEchart from './component/loginDataEchart.vue'
import SvgIcon from '@/components/SvgIcon/index.vue'

const useStore = useUserStore()
const companyName = ref()
const getCompanyName = async () => {
  const res = await getCompanyNameAPI()
  companyName.value = res[0].set_value
}
onMounted(() => {
  getCompanyName()
})
</script>

<template>
  <el-card>
    <el-row :gutter="20">
      <el-col :span="10" class="detail">
        <div class="avatar-department">
          <el-avatar shape="square" :size="150" :src="useStore.imageUrl" />
          <div class="department">
            <span>所属部门：{{ useStore.department }}</span>
            <span>所属公司：{{ companyName }}</span>
          </div>
        </div>
        <div class="line">
          <div></div>
        </div>
        <div class="info">
          <span>姓名：{{ useStore.name }}</span>
          <span>性别：{{ useStore.sex }}</span>
          <span>身份：{{ useStore.identity }}</span>
          <span>分管领域：{{ useStore.department }}</span>
          <span>
            权限：{{
              useStore.identity == '用户' ? '无权限' : useStore.identity
            }}
          </span>
        </div>
      </el-col>
      <el-col :span="13">
        <compareEchart />
      </el-col>
      <el-col :span="8">
        <productClassEchart />
      </el-col>
      <el-col :span="5" class="common-info">
        <span>常用管理</span>
        <div class="common-btn">
          <el-button type="info" plain>
            <div class="btn-layout">
              <SvgIcon name="users" height="27px" width="30px"></SvgIcon>
              <span>用户管理</span>
            </div>
          </el-button>
          <el-button type="info" plain>
            <div class="btn-layout">
              <SvgIcon name="produce" height="27px" width="30px"></SvgIcon>
              <span>产品管理</span>
            </div>
          </el-button>
          <el-button type="info" plain>
            <div class="btn-layout">
              <SvgIcon name="setmsg" height="27px" width="30px"></SvgIcon>
              <span>系统消息</span>
            </div>
          </el-button>
          <el-button type="info" plain>
            <div class="btn-layout">
              <SvgIcon name="user" height="27px" width="30px"></SvgIcon>
              <span>个人信息</span>
            </div>
          </el-button>
          <el-button type="info" plain>
            <div class="btn-layout">
              <SvgIcon name="message" height="27px" width="30px"></SvgIcon>
              <span>部门信息</span>
            </div>
          </el-button>
          <el-button type="info" plain>
            <div class="btn-layout">
              <SvgIcon name="setting" height="27px" width="30px"></SvgIcon>
              <span>系统设置</span>
            </div>
          </el-button>
        </div>
      </el-col>
      <el-col :span="10">
        <loginDataEchart />
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  height: 100vh;

  .detail {
    display: flex;
    padding: 15px;
    overflow: hidden;
    .avatar-department {
      display: flex;
      flex-direction: column;
      padding: 15px;
      align-items: center;

      .department {
        display: flex;
        flex-direction: column;
        padding: 15px;

        span {
          margin: 7px 0;
        }
      }
    }

    .line div {
      width: 0;
      height: 100%;
      border-right: 1px solid var(--el-border-color);
      margin-left: 20px;
    }

    .info {
      display: flex;
      flex-direction: column;
      padding: 15px;
      padding-left: 30px;

      span {
        margin: 10px 0;
      }
    }
  }

  .common-info {
    span {
      display: inline-block;
      margin: 12px;
    }

    .common-btn {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;

      .el-button {
        height: 80px;
        width: 80px;
        margin: 10px;
        --el-button-text-color: #000000;

        .btn-layout {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          span {
            display: inline-block;
          }
        }
      }
    }
  }
}
</style>
<style>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  margin: 5px;
  border-radius: 4px;
  border: 1px solid var(--el-border-color);
}
</style>
